// --------------获取分类并渲染----------------
function renderCategory() {
    $.ajax({
        url: '/my/category/list',
        success: function(res) {
            if (res.status === 0) {
                let str = '';
                res.data.forEach(item => {
                    str += `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.alias}</td>
                        <td>
                            <button data-id='${item.id}' data-name='${item.name}' data-alias='${item.alias}'type="button" class="layui-btn layui-btn-xs " >
                              编辑
                            </button>
                            <button data-id='${item.id}' data-name='${item.name}' data-alias='${item.alias}' type="button" class="layui-btn layui-btn-danger layui-btn-xs">
                              删除
                            </button>
                        </td>
                    </tr>
                   `;
                });
                // 把str放到tbody中
                $('tbody').html(str);
            }
        }
    })
}
renderCategory();

// ------------------------------ 添加类别 -------------------------------
let addIndex;
$('button:contains("添加类别")').on('click', function() {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(),
        area: ['500px', '250px']
    });
})

// 因为表单是动态创建的，所以需要使用事件委托的方案
$('body').on('submit', '#add-form', function(e) {
    e.preventDefault();
    let data = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: data,
        success: function(res) {
            if (res.status === 0) {
                layer.msg(res.message);
                renderCategory();
                // 关闭弹层
                layer.close(addIndex);
            }
        }
    });
})

// ------------------------------ 编辑类别 -------------------------------
let editIndex;
$('tbody').on('click', 'button:contains("编辑")', function() {
    // 能否获取事件源的三个自定义属性
    let shuju = $(this).data(); // 不给data()传参，将获取全部data-xxx属性值
    // console.log(shuju);
    editIndex = layer.open({
        type: 1,
        title: '编辑类别',
        content: $('#tpl-edit').html(),
        area: ['500px', '250px']
    });
    // 做数据回填
    $('#edit-form input[name="name"]').val(shuju.name);
    $('#edit-form input[name="alias"]').val(shuju.alias);
    $('#edit-form input[name="id"]').val(shuju.id);
})


// ------------------------------ 表单提交，阻止默认行为，收集数据，ajax提交 -------------------------------
$('body').on('submit', '#edit-form', function(e) {
    e.preventDefault();
    let data = $(this).serialize();
    $.ajax({
        url: '/my/category/update',
        type: 'POST',
        data: data,
        success: function(res) {
            layer.msg(res.message);
            renderCategory();
            // 关闭弹层
            layer.close(editIndex);
        }
    })
})

// ------------------------  删除分类 -----------------------
$('tbody').on('click', 'button:contains("删除")', function() {
    // 获取id
    let id = $(this).data('id');

    // 询问是否要删除
    layer.confirm('你是否要删除吗？', function(index) {
        // do something

        // 点击确定，这个函数触发了
        // console.log(id);
        // 发送ajax请求进行删除操作
        $.ajax({
            url: '/my/category/delete',
            data: { id: id },
            success: function(res) {

                // 删除成功，重新渲染页面
                if (res.status === 0) {
                    layer.msg(res.message);
                    renderCategory();
                }
            }
        });
        // 关闭弹层
        layer.close(index);
    });
});